<template>
  <div class="patDetails bg-white px-5 box-border" ref="printDom">
    <div class="detail-title">患者信息</div>
    <div class="info-items">
      <div class="info-items-label">姓<span>;;;;;;;;</span>名：</div>
      <div class="info-items-value">{{ info.patientName }}</div>
    </div>
    <div class="info-items">
      <div class="info-items-label">序<span>;;</span>列<span>;;</span>号：</div>
      <div class="info-items-value">{{ info.visitNoStr }}</div>
    </div>
    <div class="info-items">
      <div class="info-items-label">身份证号：</div>
      <div class="info-items-value">{{ info.identityNumber }}</div>
    </div>
    <div class="info-items">
      <div class="info-items-label">电<span>;;;;;;;;</span>话：</div>
      <div class="info-items-value">{{ info.phone }}</div>
    </div>

    <div class="info-items">
      <div class="info-items-label">出生日期：</div>
      <div class="info-items-value">{{ info.birthday }}</div>
    </div>
    <div class="info-items">
      <div class="info-items-label">年<span>;;;;;;;;</span>龄：</div>
      <div class="info-items-value">{{ info.age ? info.age + '岁' : '-' }}</div>
    </div>
    <div class="info-items">
      <div class="info-items-label">性<span>;;;;;;;;</span>别：</div>
      <div class="info-items-value">{{ info.gender ? (info.gender == '1' ? '男' : '女') : '' }}</div>
    </div>
    <div class="info-items">
      <div class="info-items-label">诊<span>;;;;;;;;</span>断：</div>
      <div class="info-items-value">{{ info.diagnosis }}</div>
    </div>

    <div class="info-items" style="width: 100%">
      <div class="info-items-label">家庭地址：</div>
      <div class="info-items-value">{{ addr }}</div>
    </div>

    <div class="info-items">
      <div class="info-items-label">科<span>;;;;;;;;</span>室：</div>
      <div class="info-items-value">{{ info.deptName }}</div>
    </div>
    <div class="info-items">
      <div class="info-items-label">床<span>;;</span>位<span>;;</span>号：</div>
      <div class="info-items-value">{{ info.bedNo }}</div>
    </div>

    <div class="info-items">
      <div class="info-items-label">记录时间：</div>
      <div class="info-items-value">{{ info.visitTime }}</div>
    </div>
    <div class="info-items">
      <div class="info-items-label">截止时间：</div>
      <div class="info-items-value">{{ info.outTime }}</div>
    </div>

    <div class="info-items">
      <div class="info-items-label">设备编号：</div>
      <div class="info-items-value">{{ info.equipmentNo }}</div>
    </div>

    <div v-if="info.sensorSeq" class="info-items" style="width:50%">
      <div class="info-items-label">传感器编号：</div>
      <div class="info-items-value">{{ info.sensorSeq }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {storeToRefs} from 'pinia'
import {usePatientStore} from '@/store/modules/patient'
import {reactive, toRefs, watch, ref} from 'vue'
import {ElNotification} from 'element-plus'
import {useRegtStore} from '@/store/modules/reg'
import { getPatDatailInfo } from '@/api/patientREG'
import {formatTime} from "@/utils";

const useReg = useRegtStore()
const {currentPatient} = storeToRefs(usePatientStore())

/** 表单 */
interface InfoField {
  readonly visitNo?: NumUn | StrUn
  readonly visitNoStr?: StrUn
  readonly patientName?: StrUn
  readonly identityNumber?: StrUn
  readonly phone?: StrUn
  readonly birthday?: StrUn
  readonly age?: NumUn
  readonly gender?: StrUn
  readonly diagnosis?: StrUn
  readonly province?: StrUn
  readonly city?: StrUn
  readonly district?: StrUn
  readonly address?: StrUn
  readonly deptName?: StrUn
  readonly bedNo?: StrUn
  readonly rentalDays?: NumUn
  readonly visitTime?: StrUn
  readonly outTime?: StrUn
  readonly equipmentNo?: StrUn
  readonly sensorSeq?: StrUn
}

interface DataType {
  info: InfoField
}

const data = reactive<DataType>({
  info: {}
})
const {info} = toRefs(data)

// 查询患者信息
watch(currentPatient, () => {
  getPatDatailInfo({visitNo: currentPatient.value.visitNoStr as string}).then((res: any) => {
    const data = JSON.parse(JSON.stringify(res.data))
    info.value = data
    //城市转换
    useReg.setDeptId(res.data.deptId) //存储科室id
    useReg.setEquipmentVO(res.data.equipmentVO) //存储设备信息
    getAddr(data.province, data.city, data.district, data.address);
    if (data.visitStatus == "0") {
      getErrorTip(data.outTime, data.patientName)
    }
  })
})

/**
 * 根据患者绑定时长，显示相应提示
 * @param outTimeStr
 * @param name
 */
const getErrorTip = (outTimeStr: string, name: string) => {
  // 结束时间
  outTimeStr = outTimeStr.replace(/-/g, "/");
  let outDateMills = new Date(outTimeStr).getTime();
  // 当前时间
  let now = new Date().getTime();

  // 如果当前时间距离预期结束时间不到十分钟，提示警告信息
  let sjc = outDateMills - now;
  if (sjc <= (10 * 60 * 1000) && sjc >= 0) {
    doNotification("warning", "患者<b>" + name + "</b>的疗程将于<b>" + formatTime(outDateMills, 'yyyy-MM-dd HH:mm:ss') + "</b>结束，请及时解绑！");
  } else if (sjc < 0) {
    doNotification("error", "患者<b>" + name + "</b>的疗程已于<b>" + formatTime(outDateMills, 'yyyy-MM-dd HH:mm:ss') + "</b>结束，请将该患者解绑！");
  }
}
const doNotification = (type, msg) => {
  ElNotification({
    type: type,
    title: '提示',
    dangerouslyUseHTMLString: true,
    message: msg,
    position: 'bottom-right',
    showClose: false,
    duration: 10000,
  });
}

const addr = ref('')
const getAddr = (province: string, city: string, district: string, address: string) => {
  let finalAddr = "";
  if (province) {
    finalAddr += province;
  }
  if (city) {
    finalAddr += city;
  }
  if (district) {
    finalAddr += district;
  }
  if (address) {
    finalAddr += address;
  }

  addr.value = finalAddr ? finalAddr : "-";
}
</script>

<style lang="less">
.patDetails {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  .detail-title {
    width: 100%;
    color: var(--el-text-color-primary);
    font-size: 16px;
    font-weight: 700;
  }

  .info-items {
    width: 25%;
    display: flex;
    align-content: center;
    font-weight: 400;
    line-height: 23px;
    font-size: 14px;
    margin-bottom: 5px;

    .info-items-label {
      min-width: 80px;
      color: var(--el-text-color-primary);
      font-weight: 500;
      text-align: left;

      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      span {
        color: transparent;
      }
    }

    .info-items-value {
      width: calc(100% - 100px);
      padding: 0 10px;
      border-bottom: 1px solid var(--el-text-color-primary);
      color: var(--el-text-color-regular);
      text-align: left;
    }
  }

  .info-items-lg {
    width: 33.333333%;
    font-size: 20px;
  }
}
</style>
